<template>
	<view class="publishComments">
		<view class="example-body">
			<!-- <uni-file-picker limit="3"></uni-file-picker> -->
			<!-- <uni-file-picker limit="3" title="最多选择3张图片"></uni-file-picker> -->
		</view>
		<view class="serviceStatus">
			保洁服务情况
		</view>
		<view class="uni-px-5 uni-pb-5">
			<uni-data-checkbox selectedColor="#F33A45" mode="tag" multiple v-model="checkbox" :localdata="serviceScope"
				@change="change"></uni-data-checkbox>
		</view>
		<view class="rate">
			<view class="content">
				<image src="@/static/logo.png" mode="widthFix"></image>
				<text class="star">综合评分</text>
				<view>
					<uni-rate :value="3" :size="20" color="#bbb" margin="10" active-color="red"
						@change="onChangeNumber" />
				</view>

			</view>
		</view>
		<view class="">
			<uni-easyinput type="textarea" autoHeight v-model="commitValue" placeholder="多多描述商品和使用感受,更受欢迎哦"></uni-easyinput>

		</view>
		<view class="submitBtn" @click="submitCommit">
			提交评价
		</view>
		<view class="">
			<uni-data-checkbox multiple v-model="checkbox1" :localdata="hobby"></uni-data-checkbox>
		</view>
	</view>
</template>

<script setup>
	const {
		proxy
	} = getCurrentInstance()
	const checkbox = ref([-1])
	const checkbox1 = ref([-1])
	const starNumber=ref()
	const orderId=ref()
	const productId=ref()
	const pjlist =ref([])
	const hobby = ref([{
		text: '匿名评价',
		value: 0
	}])
	const serviceScope = ref([{
		text: '工具非常齐全',
		value: 0
	}, {
		text: '打扫的非常干净',
		value: 1
	}, {
		text: '服务态度超级赞',
		value: 2
	}, {
		text: '打扫的效率高',
		value: 3
	}, {
		text: '服务非常专业',
		value: 4
	}, {
		text: '超预期的服务',
		value: 5
	}])
	const commitValue = ref('')
	const change = (e) => {
		pjlist.value=[]
		console.log(e)
		console.log(e.detail.data)
		for(let i=0;i<e.detail.data.length;i++){
			// pjlist.value=pjlist.value.push
			pjlist.value.push(e.detail.data[i].text)
		}	
		console.log(pjlist.value)
		pjlist.value =pjlist.value.toString()
		console.log(pjlist.value)
	}
	const onChangeNumber = (e) => {
		console.log(e)
		starNumber.value=e.value
		console.log(starNumber.value)
	}
	const submitCommit = () => {
		proxy.sjuRequest.request("/api/weChatMall/order/saveOrderProductComment", 'post', {
			"orderId":orderId.value ,
			"productId": productId.value,
			"comment": commitValue.value,
			"commentary_score": starNumber.value,
			"openId":proxy.sjuLogin.getValue("miaoMaGJOpenid"),
			"mobile": proxy.sjuLogin.getValue("miaoMaGJMobile"),
			"labelComment": pjlist.value
		}).then(res => {
			console.log(res)


		})
	}
	onLoad((options) => { //获取路由参数
		
		orderId.value = options.orderId
		productId.value = options.productId
		console.log(options.orderId)
		console.log(options.productId)	
	})
</script>

<style lang="scss">
	.publishComments {
		width: 100%;
		height: 100%;
		background-color: #FAFAFA;
		padding: 20rpx;
		box-sizing: border-box;

		.serviceStatus {
			margin: 20rpx 0;
			color: #5A5A5A;
			font-size: 30rpx;
			font-weight: bold;
		}

		::v-deep.checklist-text {
			font-size: 22rpx !important;
		}

		.rate {
			margin: 20rpx 0;

			.content {
				display: flex;
				flex-direction: row;
				align-items: center;

				image {
					width: 50rpx;
					margin-right: 10rpx;
				}

				.star {
					margin-right: 30rpx;
				}

			}

		}

		.submitBtn {
			width: 90%;
			margin: 0 auto;
			margin-top: 40rpx;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 32rpx;
			border-radius: 20px;
			background: #3A8AFB;
			color: #fff;
			text-align: center;
		}
	}
</style>